<template>
  <div class="wrapper-container" style="width:100%;display: flex; flex-direction: column">
    <div class="search-container" style="margin:0;padding-left:0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span style="color:#004ca7">学&ensp;&ensp;&ensp;&ensp;期：</span>
          <el-select
            v-model="searchParams.termid" 
            size="mini"
            placeholder="请选择学期"
            style="width: 160px"
            clearable
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span style="color:#004ca7">考试类型：</span>
          <el-select
            v-model="searchParams.checkType" 
            size="mini"
            placeholder="请选择考试类型"
            style="width: 160px"
            clearable
            @change="handleCheck"
          >
            <el-option
              v-for="(item,index) in checkTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
        </el-select>
        </div>
        <div class="search-container-item" v-show="isShowPC">
          <span style="color:#004ca7">批&ensp;&ensp;&ensp;&ensp;次：</span>
          <el-select
            v-model="searchParams.planname" 
            size="mini"
            placeholder="请选择批次"
            style="width: 160px"
            clearable
          >
            <el-option
              v-for="(item,index) in selectPcList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span style="color:#004ca7">日&ensp;&ensp;&ensp;&ensp;期：</span>
          <el-date-picker type="date" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择日期" v-model="searchParams.exadate" style="width: 160px" size="mini"></el-date-picker>
        </div>
        <div class="search-container-item">
          <!-- &ensp;&ensp;&ensp;&ensp; -->
          <span style="color:#004ca7">节&ensp;&ensp;&ensp;&ensp;次：</span>
          <el-select
              v-model="searchParams.exaschedule" size="mini"
              placeholder="请选择节次"
              style="width:160px"
              clearable
              
            >
              <el-option
                v-for="item in sectionList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
        </div>
        <div class="search-container-item" style="width:445px">
          <span>课程负责单位：</span>
          <el-select
            v-model="searchParams.department"
            style="width: 160px;margin-right:5px"
            size="mini"
            placeholder="请选择"
            @change="handleXb"
            clearable
            :disabled="roleId == '1490880728751644674' || roleId == '1498848865273745410' || roleId == '1476444221949898754' || roleId == '1475294432243830786' || roleId == '1490880584475975682' || roleId == '1496015526935564290' || roleId == '1490880658945843202'"
          >
            <el-option
            style="margin-right:5px"
              v-for="(item,index) in xbList"
              :key="index"
              :label="item.deptName"
              :value="item.deptName"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="searchParams.teachingandresearchsection"
            style="width: 160px"
            size="mini"
            placeholder="请选择"
            @change="handleClass"
            clearable
            :disabled="roleId == '1490880728751644674' || roleId == '1498848865273745410' || roleId == '1476444221949898754' || roleId == '1475294432243830786' || roleId == '1490880584475975682' || roleId == '1496015526935564290'"
          >
            <el-option
              v-for="(item,index) in gClassList"
              :key="index"
              :label="item.deptName ? item.deptName : item.value"
              :value="item.deptName ? item.deptName : item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 队长角色无 -->
        <div class="search-container-item" :style="isShowPC ? 'margin-top:15px' : 'margin-left:15px'" v-if="roleId != '1490880728751644674'">
          <span style="color:#004ca7">队&ensp;&ensp;&ensp;&ensp;别：</span>
          <el-select
              v-model="searchParams.studentteam" size="mini"
              placeholder="请选择队别"
              style="width:160px"
              clearable
            >
              <el-option
                v-for="item in ddList"
                :key="item.id"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-select>
        </div> 
        <div class="search-container-item" style="margin-top:15px">
          <span style="color:#004ca7">级&ensp;&ensp;&ensp;&ensp;次：</span>
          <el-select
              v-model="searchParams.exaschedule" size="mini"
              placeholder="请选择级次"
              style="width:160px"
              clearable
            >
              <el-option
                v-for="(item,index) in njList"
                :key="index"
                :label="item.xqszxn"
                :value="item.xqszxn"
              >
              </el-option>
            </el-select>
        </div> 
        <div class="search-container-item" style="margin-top:15px">
          <span style="color:#004ca7">专业班次：</span>
          <el-select
            v-model="searchParams.proclassname" 
            size="mini"
            placeholder="请选择专业班次"
            style="width: 160px"
            clearable
          >
            <el-option
              v-for="(item) in specialtyList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
            >
            </el-option>
        </el-select>
        </div>
        <div class="search-container-item" style="margin:15px 0 0 0">
          <span style="color:#004ca7">人&ensp;&ensp;&ensp;&ensp;数：</span>
          <el-input
            style="width: 135px;"
            size="mini"
            placeholder="请输入内容"
            v-model="searchParams.exaNumber"
            type="number"
          ></el-input><span style="margin-left:5px">人</span>
        </div>
        <div class="search-container-item" style="margin:15px 0 0 0">
          <span>课程名称：</span>
          <el-input
            style="width: 160px;"
            size="mini"
            placeholder="请输入内容"
            v-model="searchParams.coursename"
            clearable
          ></el-input>
        </div>
        <div class="search-container-item" style="margin:15px 0 0 0">
          <!-- <span style="margin-right: 38px;">教员名称：</span> -->
          <span>教员名称：</span>
          <el-input
            style="width: 160px"
            size="mini"
            placeholder="请输入内容"
            v-model="searchParams.teachingfaculty"
            clearable
          ></el-input>
        </div>
        <div class="search-container-item" style="margin-top:15px;width:280px">
          <span style="color:#004ca7">状&ensp;&ensp;&ensp;&ensp;态：</span>
          <el-select
              v-model="exaStatus" 
              size="mini"
              placeholder="请选择状态"
              style="width:180px"
              value-key="value"
              multiple
              collapse-tags
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </div>
        <div class="search-button" style="margin:17px 15px 0 0" @click="handleQuery">
          <img src="../../../assets/assessment/icon-search.png" alt="" style="width:17px;height:17px" />
          <span style="font-size:14px">查询</span>
        </div>
        <div style="display: inline-flex;">
          <div class="all-button" @click="linkAllExam('one')" style="border:1px solid #02c86c;background: #f1fff8;">
            <!-- <img src="../../../assets/workload/testbule.png" alt=""/> -->
            <span style="color:#02c86c">查看全部考试安排</span>
          </div>
          <div class="all-button" style="margin-left:15px" @click="linkAllExam('two')">
            <!-- <img src="../../../assets/workload/testyellow.png" style="width: 15px;height: 15px;" alt=""/> -->
            <span>查看全部缓考安排</span>
          </div>
        </div>
      </div>
    </div>
    <div class="table-container">
      <!-- <tablelist
        :dataList="dataList"
        :colDataList="colDataList"
        :config="config"
      ></tablelist> -->
      <el-table
        :data="dataList"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="system" label="状态" align="center" v-if="roleId == '1490880728751644674'">
        </el-table-column>
        <el-table-column prop="exadate" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="exaschedule" label="节次" align="center">
        </el-table-column>
        <el-table-column prop="department" label="系" align="center">
        </el-table-column>
        <el-table-column prop="teachingandresearchsection" label="教研室" align="center">
        </el-table-column>
        <el-table-column prop="coursename" label="考试课程" align="center">
        </el-table-column>
        <el-table-column prop="teachingfaculty" label="授课教员" align="center">
        </el-table-column>
        <el-table-column prop="checktype" label="考试类型" align="center">
        </el-table-column>
        <el-table-column prop="finalexamination" label="考试方式" align="center">
        </el-table-column>
        <el-table-column prop="studentlevel" label="级次" align="center">
        </el-table-column>
        <el-table-column prop="specialtyclassname" label="专业班次" align="center">
        </el-table-column>
        <el-table-column prop="biggernumber" label="人数" align="center">
        </el-table-column>
        <el-table-column prop="exasite" label="考场" align="center">
        </el-table-column>
        <el-table-column prop="exaterid" label="监考员" align="center">
        </el-table-column>
        <el-table-column prop="paramvalue" label="备注" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel
          class="export-btn"
          :data="dataList"
          :fields="jsonFields"
          type="xls"
          name="全部考试安排.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="text">授课教员名字后加“*”为课程负责人</div>
      <div>
        <el-pagination
          style="margin-top:14px;padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="btn">
      <el-button
        native-type="submit"
        size="medium "
        type="warning"
        class="submit"
        v-show="this.record === 3"
        @click="choiceLink(4)"
        >授权</el-button
      >
    </div>
  </div>
</template>

<script>
import tablelist from "@/views/comonents/tablelist";
import {coursePlanGetList,selectPc} from "../../../api/courseExame/coursePlan";
import { reqGetXqList,queryDictByCode,reqXydList,reqZybcList,reqCheckYearList } from "@/api/admin1/check";
import { getxb,getClass,queryXBclassroom } from "@/api/course/courses";
import { getStore } from "@/util/store.js"

export default {
  components: {
    tablelist,
  },
  name: "supervisonMain",
  data() {
    return {
      current:1,
      size:10,
      isShowPC:true,
      exaStatus:'',
      checkTypeList: [
        {
          label: "正常",
          value: "正常",
        },
        {
          label: "补考",
          value: "补考",
        },
        {
          label: "第二次补考",
          value: "第二次补考",
        },
        {
          label: "缓考",
          value: "缓考",
        },
        {
          label: "第二次补缓考",
          value: "第二次补缓考",
        }
      ],
      total:'',
      searchParams:{
        planname:'',
        termid:'',
        department:'',
        teachingandresearchsection:'',
        coursename: "",
        coursenumber:"",
        exaschedule:"",
        exadate:"",
        studentteam:'',
        examcoucheckstatus:"",
        proclassname:'',
        teachingfaculty:'',
      },
      statusList: [
        {
          value: "1",
          label: "未排考"
        },
        {
          value: "2",
          label: "待下发核对"
        },
        {
          value: "6",
          label: "待教员审核"
        },
        {
          value: "3",
          label: "待教研主任审核"
        },
        {
          value: "4",
          label: "待发布"
        },
        {
          value: "5",
          label: "已发布"
        }
      ],
      roleId: '',
      code:'section',
      xbList:[],
      gClassList:[],
      sectionList:[], //节次
      specialtyList:[],
      selectPcList:[],
      njList: [],
      ddList:[],
      colDataList: [
        {
          label: "状态",
          prop: "exadate",
        },
        {
          label: "日期",
          prop: "exadate",
        },
        {
          label: "节次",
          prop: "exaschedule",
        },
        {
          label: "系",
          prop: "department",
        },
        {
          label: "教研室",
          prop: "teachingandresearchsection",
        },
        {
          label: "考试课程",
          prop: "coursename",
        },
        {
          label: "授课教员",
          prop: "teachingfaculty",
        },
        {
          label: "考试类型",
          prop: "checktype",
        },
        {
          label: "考试方式",
          prop: "finalexamination",
        },
        {
          label: "队别",
          prop: "studentteam",
        },
        {
          label: "级次",
          prop: "studentlevel",
        },
        {
          label: "专业班次",
          prop: "specialtyclassname",
        },
        {
          label: "人数",
          prop: "biggernumber",
        },
        {
          label: "考场",
          prop: "exasite",
        },
        {
          label: "监考员",
          prop: "exaterid",
        },
        {
          label: "备注",
          prop: "paramvalue",
        },
      ],
      dataList: [],
      jsonFields:{
        '状态':'',
        '日期': 'exadate',
        '节次': 'exaschedule',
        '系': 'department',
        '教研室': 'teachingandresearchsection',
        '考试课程': 'coursename',
        '授课教员': 'teachingfaculty',
        '考试类型': 'checktype',
        '考试方式': 'finalexamination',
        '级次': 'studentlevel',
        '专业班次': 'specialtyclassname',
        '人数': 'biggernumber',
        '考场': 'exasite',
        '监考员': 'exaterid',
        '备注': 'paramvalue',
      },
      config: {
        mergeTarget: "", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性

        ],
      },
      record: 0,
      setName: "",
      xqList:[],
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
  },
  mounted() {
    this.termAll();
    this.xbAll();
    this.classAll();
    this.ddAll();
    this.getlist();
    this.gradeAll();
    this.sectionData();
    selectPc().then(res=>{
      this.selectPcList = res.data.data;
    })
    this.queryAllCoursePlanList("");
  },
  methods: {
    //选择补缓考类型隐藏批次
    handleCheck(val){
      if(val == '补考' || val == '缓考'){
        this.isShowPC = false;
      } else {
        this.isShowPC = true
      }
    },
    //获取专业班次
    async getlist(){
      const result = await reqZybcList();
      result.data.code == 200 ? this.specialtyList = result.data.data : [];
    }, 
    // 获取队别下拉框
    async ddAll(){
      const result = await reqXydList();
      result.data.code == 200 ? this.ddList = result.data.data : [];
    },
    handleCurrentChange(val) {
      this.current = val;
      this.queryAllCoursePlanList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.queryAllCoursePlanList();
    },
    linkAllExam(type){
      if(type == 'one'){
        this.$router.push("/student/examination/examinationlist");
      } else if (type == 'two'){
        this.$router.push("/teacher/workload/arrangement");
      }
    },
    async xbAll(){
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll(){
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 根据系部选中获取教研室
    async handleXb(val){
      if(val){
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
        this.searchParams.teachingandresearchsection = ''
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    // 教研室下拉框的改变
    handleClass(val){
      if(!val){
        this.xb ? this.handleXb(this.xb)  : this.classAll();
      }
    },
    //学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    //节次
    sectionData() {
      queryDictByCode(this.code).then(res=>{
        this.sectionList = res.data.data;
      })
    },
    //获取年级
    gradeAll(){
      let that = this;
      reqCheckYearList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.njList = res.data.data;
        }
      });
    },
    queryAllCoursePlanList(exaStatus) {
      this.searchParams.examcoucheckstatus = exaStatus;
      // this.searchParams.examcoucheckstatus = this.searchParams.examcoucheckstatus.length > 0 ? this.searchParams.examcoucheckstatus.toString() : '';
      coursePlanGetList(this.current,this.size,this.searchParams).then(res => {
        this.dataList = res.data.data.records;
        for (let i = 0; i < res.data.data.records.length; i++) {
          this.dataList[i].teachingfaculty = res.data.data[i].teachingfaculty + '*';
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.exaStatus.length == 0){
        this.searchParams.examcoucheckstatus = '';
      } else {
        this.searchParams.examcoucheckstatus = this.exaStatus.toString();
      }
      this.queryAllCoursePlanList(this.searchParams.examcoucheckstatus);
      this.current = 1;
    },
    choiceLink(index) {
      this.record = index;
    },
  },
  computed: {}, //计算属性
};
</script>


<style lang="less" scoped>
@import "../../../styles/supervision.less";
/deep/.el-select__tags {
  min-width: 160px;
}
.all-button {
    cursor: pointer;
    width: 138px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 17px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      // margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
/deep/.el-date-editor .el-input__prefix {
    left: auto;
    right: 10px;
    top: 2px;
}
/deep/ .table-container {
  margin: 15px 0 0 0;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;
  .search-container-item {
    width: 260px;;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    cursor: pointer;
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    // line-height: 39px;
    color: #004ca7;
    margin-left: 150px;
  }
}
</style>
